<template>
  <div class="box">
    <!-- 头部 -->
    <div class="heads">
      <!-- 跳转 -->
      <router-link
        class="opens"
        :to="{path:'/open'}"
      ></router-link>
      <!-- 时间 -->
      <div class="item">09：35：26</div>
      <!-- 日期 -->
      <div class="date">
        <p>2018/11/04</p>
        <p>星期一</p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content_box">
      <el-row>
        <!-- 左部分 -->
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 能耗趋势 -->
            <div class="lef_top_box">
              <img
                class="right_horn"
                src="../../assets/右角.png"
                alt
              />
              <img
                class="left_horn"
                src="../../assets/左角.png"
                alt
              />
              <!-- 空气质量 -->
              <div class="air_box">
                <div class="air">
                  <img
                    src="../../assets/空气质量.svg"
                    alt
                  />
                  <span>优</span>
                  <span>空气质量</span>
                </div>
                <!-- pm -->
                <div class="pm">
                  <img
                    src="../../assets/PM2.5.svg"
                    alt
                  />
                  <span>17</span>
                  <span>PM2.5</span>
                </div>
                <!-- 摄氏度 -->
                <gauge-oc style="position: absolute;left:180px;top: 40px"></gauge-oc>
                <!-- 刻度 -->
              </div>
              <div class="centigrade_box">
                <gauge-table></gauge-table>
              </div>
              <div class="gauge-ocs">
                <p>湿度</p>
                <p>湿度</p>
              </div>
              <!-- 信息 -->
              <div class="information">
                <!-- 联系电话 -->
                <div class="phone">
                  <img
                    src="../../assets/电话.svg"
                    alt
                  />
                  <span>联系电话：0411-82396356</span>
                </div>
                <!-- 地址 -->
                <div class="address">
                  <img
                    src="../../assets/定位.svg"
                    alt
                  />
                  <span>地址：河北省邯郸市滏河北大街266号</span>
                </div>
              </div>
            </div>
            <!-- 能耗趋势 数据图 :chartData="lineChartData"-->
            <div class="left_center_box">

              <line-chart></line-chart>
            </div>
            <!-- 环境监测 height-->
            <div class="left_bottom_box">
              <rose-pie style="margin:90px,width:600px;height:400px"></rose-pie>
            </div>
          </div>
        </el-col>
        <!-- 中部分 -->
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            <!-- 安全用电天数 -->
            <div class="center_top_box">
              <img
                class="right_horn"
                src="../../assets/右角.png"
                alt
              />
              <img
                class="left_horn"
                src="../../assets/左角.png"
                alt
              />
              <img
                class="titles"
                src="../../assets/安全用电天数001.png"
                alt
              />
              <img
                class="imags_dt"
                src="../../assets/数字底板.png"
                alt
              />
              <img
              class="imags_dt"
                src="../../assets/数字底板.png"
                alt
              />
              <img
              class="imags_dt"
                src="../../assets/数字底板.png"
                alt
              />
              <img
                class="imags_dt"
                src="../../assets/数字底板.png"
                alt
              />
              <p class="img_0">
                <img
                  src="../../assets/0.jpg"
                  alt
                />
              </p>
              <p class="imgs_0">
                <img
                  src="../../assets/0.jpg"
                  alt
                />
              </p>
              <p class="img_1">
                <img
                  src="../../assets/1.png"
                  alt
                />
              </p>
              <p class="imgs_1">
                <img
                  src="../../assets/1.png"
                  alt
                />
              </p>
            </div>
            <!-- 实时监控 -->
            <div class="center_center_box">
              <img
                class="jk_img"
                src="../../assets/yinhang_jk.jpg"
                alt
              />
              <img
                class="tite_img"
                src="../../assets/实时监控1.png"
                alt
              />
            </div>
            <!-- 报警信息 -->
            <!-- 报警统计 -->
            <div class="center_bottom_box">
              <!-- EcharsRadar -->
              <echars-radar style="width:600px;height:400px"></echars-radar>
              <!-- <div class="back">
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                  <span>2019-05-05 14：42：01</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="strike">打火报警</div>
              </div>
              <div class="back_tow">
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                  <span>2019-05-05 14：42：01</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="strike">打火报警</div>
              </div>
              <div class="back_three">
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                  <span>2019-05-05 14：42：01</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="strike">打火报警</div>
              </div> -->
            </div>
          </div>
        </el-col>
        <!-- 右部分 -->
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 设备状态 -->
            <div class="right_top_box">
              <img
                class="title"
                src="../../assets/设备状态01.png"
                alt
              />
              <img
                class="right_horn"
                src="../../assets/右角.png"
                alt
              />
              <img
                class="right_top_horn"
                src="../../assets/右上角.png"
                alt
              />
              <img
                class="left_horn"
                src="../../assets/左角.png"
                alt
              />
              <multiple-pie style="width:600px"></multiple-pie>
              <ul>
                <li>在线</li>
                <li>离线</li>
                <li>正常</li>
                <li>报警</li>
                <li>故障</li>
              </ul>
            </div>
            <!-- 设备-->
            <div class="right_center_box">
              <img
                class="right_horn"
                src="../../assets/右角.png"
                alt
              />
              <img
                class="left_horn"
                src="../../assets/左角.png"
                alt
              />
              <!-- <img
                class="jk_img"
                src="../../assets/yinhang_jk.jpg"
                alt
              />
              <img
                class="tite_img"
                src="../../assets/实时监控1.png"
                alt
              /> -->
              <ul class="ul_noe">
                <!-- 打开智能空开 -->
                <li>
                  <img
                    @click="smart_open()"
                    src="../../assets/智能空开.svg"
                    alt
                  />
                  <p>智能空开</p>
                </li>
                <li>
                  <img
                    src="../../assets/摄像头.svg"
                    alt
                  />
                  <p>二楼摄像头</p>
                </li>
                <li>
                  <img
                    src="../../assets/摄像头.svg"
                    alt
                  />
                  <p>一楼摄像头</p>
                </li>
                <li>
                  <img
                    src="../../assets/烟感.svg"
                    alt
                  />
                  <p>烟感250E</p>
                </li>
                <li>
                  <img
                    src="../../assets/水浸.svg"
                    alt
                  />
                  <p>水浸EA67</p>
                </li>
              </ul>
              <ul class="ul_tow">
                <li>
                  <img
                    src="../../assets/水浸.svg"
                    alt
                  />
                  <p>水浸F2F0</p>
                </li>
                <li>
                  <img
                    src="../../assets/LED屏.svg"
                    alt
                  />
                  <p>LED屏</p>
                </li>
                <li>
                  <img
                    src="../../assets/灯箱.svg"
                    alt
                  />
                  <p>灯箱</p>
                </li>
                <li>
                  <img
                    src="../../assets/智能空开.svg"
                    alt
                  />
                  <p>空调控制器</p>
                </li>
                <li>
                  <img
                    src="../../assets/无线开关.svg"
                    alt
                  />
                  <p>无线开关</p>
                </li>
              </ul>
            </div>
            <!-- 设备  -->
            <!-- 报警信息 -->
            <div class="right_bottom_box">
              <!-- <ul class="ul_noe">
                打开智能空开
                 <li>
                  <img
                    @click="smart_open()"
                    src="../../assets/智能空开.svg"
                    alt
                  />
                  <p>智能空开</p>
                </li>
                <li>
                  <img
                    src="../../assets/摄像头.svg"
                    alt
                  />
                  <p>二楼摄像头</p>
                </li>
                <li>
                  <img
                    src="../../assets/摄像头.svg"
                    alt
                  />
                  <p>一楼摄像头</p>
                </li>
                <li>
                  <img
                    src="../../assets/烟感.svg"
                    alt
                  />
                  <p>烟感250E</p>
                </li>
                <li>
                  <img
                    src="../../assets/水浸.svg"
                    alt
                  />
                  <p>水浸EA67</p>
                </li>
              </ul> -->
              <!-- <ul class="ul_tow">
                <li>
                  <img
                    src="../../assets/水浸.svg"
                    alt
                  />
                  <p>水浸F2F0</p>
                </li>
                <li>
                  <img
                    src="../../assets/LED屏.svg"
                    alt
                  />
                  <p>LED屏</p>
                </li>
                <li>
                  <img
                    src="../../assets/灯箱.svg"
                    alt
                  />
                  <p>灯箱</p>
                </li>
                <li>
                  <img
                    src="../../assets/智能空开.svg"
                    alt
                  />
                  <p>空调控制器</p>
                </li>
                <li>
                  <img
                    src="../../assets/无线开关.svg"
                    alt
                  />
                  <p>无线开关</p>
                </li>
              </ul> -->
              <div class="back">
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                  <span>2019-05-05 14：42：01</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="strike">打火报警</div>
              </div>
              <div class="back_tow">
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                  <span>2019-05-05 14：42：01</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="strike">打火报警</div>
              </div>
              <div class="back_three">
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                  <span>2019-05-05 14：42：01</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="police_noe">
                  <p>
                    <span class="span_p"></span>
                  </p>
                  <span>线路1：</span>
                  <span>漏电报警</span>
                  <span>智能空开</span>
                </div>
                <div class="strike">打火报警</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div
      class="dhk"
      v-show="del_page"
     >
      <div class="bhk_box">
        <span
          class="del"
          @click="dels()"
        ></span>
        <div class="box_center">
          <div class="cash">
            <span>现金业务</span>
            <el-switch
              v-model="value"
              active-color="#1b9dfe"
              inactive-color="#dd001b"
              active-text="开"
              inactive-text="关"
              weight="50px"
              style="display: block"
            >
            </el-switch>
            <ul>
              <li>
                <p>225.0</p>
                <p>电压（v）</p>
              </li>
              <li>
                <p>190.0</p>
                <p>电流（A）</p>
              </li>
              <li>
                <p>287.0</p>
                <p>功率（kW）</p>
              </li>
              <li>
                <p>40.9</p>
                <p>温度（℃）</p>
              </li>
              <li>
                <p>26.7</p>
                <p>用电量（kW.h）</p>
              </li>
            </ul>
          </div>
          <div class="vip">
            <span>VIP区域</span>
            <el-switch
              v-model="value2"
              active-color="#1b9dfe"
              inactive-color="#dd001b"
              active-text="开"
              inactive-text="关"
              weight="50px"
              style="display: block"
            >
              ></el-switch>
            <ul>
              <li>
                <p>225.0</p>
                <p>电压（v）</p>
              </li>
              <li>
                <p>190.0</p>
                <p>电流（A）</p>
              </li>
              <li>
                <p>287.0</p>
                <p>功率（kW）</p>
              </li>
              <li>
                <p>40.9</p>
                <p>温度（℃）</p>
              </li>
              <li>
                <p>26.7</p>
                <p>用电量（kW.h）</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="box_centers">
          <div class="cash">
            <span>现金业务</span>
            <el-switch
              v-model="value3"
              active-color="#1b9dfe"
              inactive-color="#dd001b"
              active-text="开"
              inactive-text="关"
              weight="50px"
              style="display: block"
            >
              ></el-switch>
            <ul>
              <li>
                <p>225.0</p>
                <p>电压（v）</p>
              </li>
              <li>
                <p>190.0</p>
                <p>电流（A）</p>
              </li>
              <li>
                <p>287.0</p>
                <p>功率（kW）</p>
              </li>
              <li>
                <p>40.9</p>
                <p>温度（℃）</p>
              </li>
              <li>
                <p>26.7</p>
                <p>用电量（kW.h）</p>
              </li>
            </ul>
          </div>
          <div class="vip">
            <span>VIP区域</span>
            <el-switch
              v-model="value4"
              active-color="#1b9dfe"
              inactive-color="#dd001b"
              active-text="开"
              inactive-text="关"
              weight="50px"
              style="display: block"
            >
              ></el-switch>
            <ul>
              <li>
                <p>225.0</p>
                <p>电压（v）</p>
              </li>
              <li>
                <p>190.0</p>
                <p>电流（A）</p>
              </li>
              <li>
                <p>287.0</p>
                <p>功率（kW）</p>
              </li>
              <li>
                <p>40.9</p>
                <p>温度（℃）</p>
              </li>
              <li>
                <p>26.7</p>
                <p>用电量（kW.h）</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="box_center_thre">
          <div class="cash">
            <span>现金业务</span>
            <el-switch
              v-model="value5"
              active-color="#1b9dfe"
              inactive-color="#dd001b"
              active-text="开"
              inactive-text="关"
              weight="50px"
              style="display: block"
            >
              ></el-switch>
            <ul>
              <li>
                <p>225.0</p>
                <p>电压（v）</p>
              </li>
              <li>
                <p>190.0</p>
                <p>电流（A）</p>
              </li>
              <li>
                <p>287.0</p>
                <p>功率（kW）</p>
              </li>
              <li>
                <p>40.9</p>
                <p>温度（℃）</p>
              </li>
              <li>
                <p>26.7</p>
                <p>用电量（kW.h）</p>
              </li>
            </ul>
          </div>
          <div class="vip">
            <span>VIP区域</span>
            <el-switch
              v-model="value6"
              active-color="#1b9dfe"
              inactive-color="#dd001b"
              active-text="开"
              inactive-text="关"
              weight="50px"
              style="display: block"
            >
              ></el-switch>
            <ul>
              <li>
                <p>225.0</p>
                <p>电压（v）</p>
              </li>
              <li>
                <p>190.0</p>
                <p>电流（A）</p>
              </li>
              <li>
                <p>287.0</p>
                <p>功率（kW）</p>
              </li>
              <li>
                <p>40.9</p>
                <p>温度（℃）</p>
              </li>
              <li>
                <p>26.7</p>
                <p>用电量（kW.h）</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="nenghao">能耗分布</div>
    <div class="baojing">报警统计</div>
  </div>
</template>
      
<script>
//  能耗趋势数据表
import LineChart from "@/components/Eachars_ph.vue";
// 能耗分布
import RosePie from "@/components/Eachars_rosePie";
// 设备状态
import MultiplePie from "@/components/Echars_multiple";
// 环境测试
import GaugeTable from "@/components/Echars_gauge";
import GaugeOc from "@/components/echars_gaugeoc";
// 雷达报警统计
import EcharsRadar from "@/components/Echars_ radar";
var del_page = false;
export default {
  components: {
    LineChart,
    RosePie,
    MultiplePie,
    GaugeTable,
    GaugeOc,
    EcharsRadar
  },
  data() {
    return {
      value11: true,
      value: true,
      value: true,
      value2: true,
      value3: true,
      value4: true,
      value5: true,
      value6: true,
      // 智能空开默认值
      del_page: false
    };
  },
  methods: {
    //  关闭智能空开
    dels() {
      this.del_page = false;
    },
    //  打开智能空开
    smart_open() {
      this.del_page = true;
    }
  }
};
</script>

<style scoped lang="less">
.box {
  width: 1920px;
  height: 1080px;
  background: url(../../assets/背景.png) no-repeat;
  background-size: 1920px 1080px;
  overflow: hidden;
  .baojing,
  .nenghao {
    position: relative;
    left: 301px;
    top: -410px;
    width: 63px;
    height: 25px;
    color: #70e1e9;
    font-size: 15px;
    font-weight: 500;
    background-color: #0a1282;
  }
  .baojing {
    position: relative;
    left: 924px;
    top: -433px;
  }
  /* 头部 */
  .heads {
    width: 100%;
    height: 100px;
    background: url(../../assets/bz-6.png) no-repeat;
    color: #9cf1fe;
    // 跳转支行
    .opens {
      width: 90.5px;
      height: 55.5px;
      display: block;
      margin-left: 30px;
      background-color: rgba(405, 50, 117, 0);
    }
    // 时间

    .item {
      font-size: 20px;
      font-weight: 700;
      float: right;
      margin-right: 232px;
      margin-top: -55px;
    }
    // 日期
    .date {
      font-size: 10px;
      font-weight: 500;
      float: right;
      margin-right: 100px;
      margin-top: -55px;
      text-align: center;
    }
  }
  /* 内容 */
  .content_box {
    width: 1920px;
    /* background: olive; */
    padding: 0 26px;
    // background: orangered;
    box-sizing: border-box;
    overflow: hidden;
    /* 内容上部分盒子 */
    .lef_top_box {
      width: 612px;
      height: 193px;
      padding-top: 52px;
      padding-left: 47.5px;
      box-sizing: border-box;
      background: url(../../assets/环境监测.png) no-repeat;
      // background: url(../../assets/能耗趋势.png) no-repeat;
      .right_horn {
        position: absolute;
        left: 0;
        top: 180px;
      }
      .left_horn {
        position: absolute;
        left: 600px;
        top: 183px;
      }
      // 数据提示
      .air_box {
        width: 12px;
        height: 90px;
        display: flex;
        top: 52px;
        left: 39px;
        // background-color: #ffffff;
        //  空气质量
        .air {
          position: absolute;
          left: 45px;
          top: 40px;
          img {
            width: 48px;
            height: 48px;
          }
          span {
            font-size: 12px;
            position: relative;
            left: -8px;
            top: 0px;
            color: rgba(139, 213, 231, 0.7);
          }
          span:nth-child(2) {
            font-size: 20px;
            color: #8bd5e7;
            position: relative;
            left: 25px;
            top: -25px;
          }
        }
        // pm
        .pm {
          font-size: 32px;
          margin-left: 5px;
          margin-top: 55px;
          display: flex;
          img {
            width: 40px;
            height: 40px;
            margin-right: 36px;
          }
          span {
            font-size: 12px;
            position: relative;
            left: -40px;
            top: 30px;
            color: rgba(139, 213, 231, 0.7);
          }
          span:nth-child(2) {
            font-size: 20px;
            color: #8bd5e7;
            position: relative;
            left: -15px;
            top: 5px;
          }
        }
      }
      // 摄氏度盒子
      .centigrade_box {
        width: 300px;
        height: 300px;
        position: absolute;
        left: 250px;
        top: -40px;
        // background-color: aliceblue;
      }
      // 摄氏度湿度文字
      .gauge-ocs {
        display: flex;
        font-size: 12px;
        position: absolute;
        top: 140px;
        left: 260px;
        p {
          display: block;
          margin-right: 180px;
          color: #8bd5e7;
        }
      }
      // 信息
      .information {
        margin-top: 27px;
        font-size: 14px;
        display: flex;
        color: #9cf1fe;
        // 电话
        .phone {
          margin-left: 10px;
          img {
            margin-right: 12.5px;
            vertical-align: middle;
          }
        }
        // 地址
        .address {
          margin-left: 34px;
          img {
            vertical-align: middle;
            margin-right: 12.5px;
          }
        }
      }
    }
    //  安全用电天数
    .center_top_box {
      width: 612px;
      height: 193px;
      background-color: palevioletred;
      // background: url(../../assets/用电天数.png) no-repeat;
      // background-size:612px, 0px ;
      background: url(../../assets/实时监控2.png) no-repeat;
      // background: url(../../assets/能耗趋势.png) no-repeat;
      box-sizing: border-box;
      padding-left: 50px;
      padding-top: 58px;
      .right_horn {
        position: absolute;
        left: 622px;
        top: 182px;
      }
      .left_horn {
        position: absolute;
        left: 1223px;
        top: 182px;
      }
      .titles {
        position: absolute;
        left: 780px;
        top: 0;
      }
      // 数据底图
      .imags_dt {
        margin-left: 40px;
      }
      .imags_dt:nth-child(1) {
        margin-left: 0px;
      }
      // 数据图片
      .img_0 {
        position: absolute;
        left: 740px;
        top: 90px;
      }
      .imgs_0 {
        position: absolute;
        left: 855px;
        top: 90px;
      }
      .img_1 {
        position: absolute;
        left: 970px;
        top: 90px;
      }
      .imgs_1 {
        position: absolute;
        left: 1085px;
        top: 90px;
      }
    }
    .right_top_box {
      width: 612px;
      height: 193px;
      background-color: peru;
      // background: url(../../assets/设备状态.png) no-repeat;
       background: url(../../assets/实时监控2.png) no-repeat;
      position: absolute;
      right: 10px;
      top: 0;
      .title {
        position: absolute;
        right: 170px;
        top: 0;
      }
      .right_top_horn {
        position: absolute;
        right: 0;
        top: 0;
      }
      .right_horn {
        position: absolute;
        left: 0;
        bottom: 0;
      }
      .left_horn {
        position: absolute;
        right: -3px;
        top: 183px;
      }
      ul {
        display: flex;
        position: relative;
        top: -153px;
        right: -110px;
        li {
          font-size: 14px;
          color: #9cf1fe;
          margin-right: 75px;
        }
      }
    }
    /* 内容中部分盒子 */
    .left_center_box {
      width: 612px;
      height: 300px;
      background-color: palegreen;
      background: url(../../assets/能耗趋势.png) no-repeat;
      margin-top: 24px;
    }
    .center_center_box {
      width: 612px;
      height: 300px;
      background-color: palegreen;
      // background: url(../../assets/能耗分布.png) no-repeat;
      background: url(../../assets/实时监控2.png) no-repeat;
      margin-top: 24px;
      // 监控图片
      .jk_img {
        width: 576px;
        height: 268px;
        margin-left: 18px;
        margin-top: 16px;
      }
      // titel
      .tite_img {
        width: 268px;
        height: 32px;
        position: absolute;
        right: 802px;
        top: 217px;
      }
    }
    .right_center_box { 
      width: 612px;
      height: 300px;
      background-color: palegreen;
      // background: url(../../assets/实时监控2.png) no-repeat;
      background: url(../../assets/设备.png) no-repeat;
      // margin-top: 24px;
      margin-top: 217px;
      font-size: 12px;
      color: #9cf1fe;
      // position: absolute;
      .right_horn {
        position: relative;
        left: 0;
        top: 289px;
      }
      .left_horn {
        position: relative;
        left: 587px;
        top: 289px;
      }
      // 智能空开小icon
      .ul_noe {
        position: absolute;
        right: 90px;
        bottom: 580px;
        display: flex;
        flex-wrap: wrap-reverse;
        li {
          flex: 5;
          text-align: center;
          margin-left: 30px;

          img {
            display: inline-block;
            width: 67px;
            height: 67px;
            margin-bottom: 15px;
          }
        }
      }
      .ul_tow {
        position: absolute;
        right: 90px;
        bottom: 460px;
        display: flex;
        flex-wrap: wrap-reverse;
        li {
          flex: 5;
          text-align: center;
          margin-left: 30px;

          img {
            display: inline-block;
            width: 67px;
            height: 67px;
            margin-bottom: 15px;
          }
        }
      }
    }
    // 内容下部分盒子
    // 能耗分布
    .left_bottom_box {
      width: 612px;
      height: 414px;
      background-color: palegreen;
      // 图片太小
      // background: url(../../assets/能耗分布.png) no-repeat;
      background: url(../../assets/环境监测.png) no-repeat;

      margin-top: 24px;
      display: flex;
    }
    // 报警信息
    .center_bottom_box {
      width: 612px;
      height: 414px;
      background-color: palegreen;
      background: url(../../assets/报警信息.png) no-repeat;
      margin-top: 24px;
      font-size: 14px;
      overflow: hidden;
      color: #9cf1fe;
      box-sizing: border-box;
      // 信息内容
      // .back_three,
      // .back_tow,
      // .back {
      //   width: 565px;
      //   height: 114px;
      //   box-sizing: border-box;
      //   margin-left: 14px;
      //   margin-top: 68px;
      //   margin-bottom: 14px;
      //   position: absolute;
      //   background-color: rgba(10, 28, 142, 0.5);
      //   .police_noe {
      //     display: flex;
      //     line-height: 12px;
      //     box-sizing: border-box;
      //     margin-left: 23px;
      //     margin-top: 14px;
      //     margin-bottom: 14px;

      //     p {
      //       width: 12px;
      //       height: 12px;
      //       background-color: rgba(255, 13, 122, 0.6);
      //       border-radius: 50px;
      //       margin-right: 13px;
      //       .span_p {
      //         display: block;
      //         width: 6px;
      //         height: 6px;
      //         background: #ffffff;
      //         border-radius: 50px;
      //         margin-top: 25%;
      //         margin-left: 25%;
      //       }
      //     }
      //     span:nth-child(2) {
      //       margin-right: 12px;
      //     }
      //     span:nth-child(3) {
      //       margin-right: 79px;
      //     }
      //     span:nth-child(4) {
      //       margin-right: 98px;
      //     }
      //   }
      //   .strike {
      //     //  margin-left:108px ;
      //     //  margin-left:108px ;
      //     position: relative;
      //     top: -5px;
      //     left: 108px;
      //   }
      // }

      // .back_tow {
      //   margin-top: 197.5px;
      // }
      // .back_three {
      //   margin-top: 326px;
      // }
    }
    // 设备
    // 报警信息
    .right_bottom_box {
      width: 612px;
      height: 414px;
      // background: url(../../assets/设备.png) no-repeat;
      background: url(../../assets/报警信息.png) no-repeat;
      margin-top: 24px;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      color: #9cf1fe;
      // 信息内容
      .back_three,
      .back_tow,
      .back {
        width: 565px;
        height: 114px;
        box-sizing: border-box;
        margin-left: 14px;
        margin-top: 68px;
        margin-bottom: 14px;
        position: absolute;
        background-color: rgba(10, 28, 142, 0.5);
        .police_noe {
          display: flex;
          line-height: 12px;
          box-sizing: border-box;
          margin-left: 23px;
          margin-top: 14px;
          margin-bottom: 14px;

          p {
            width: 12px;
            height: 12px;
            background-color: rgba(255, 13, 122, 0.6);
            border-radius: 50px;
            margin-right: 13px;
            .span_p {
              display: block;
              width: 6px;
              height: 6px;
              background: #ffffff;
              border-radius: 50px;
              margin-top: 25%;
              margin-left: 25%;
            }
          }
          span:nth-child(2) {
            margin-right: 12px;
          }
          span:nth-child(3) {
            margin-right: 79px;
          }
          span:nth-child(4) {
            margin-right: 98px;
          }
        }
        .strike {
          //  margin-left:108px ;
          //  margin-left:108px ;
          position: relative;
          top: -5px;
          left: 108px;
        }
      }

      .back_tow {
        margin-top: 197.5px;
      }
      .back_three {
        margin-top: 326px;
      }

      // .ul_noe {
      //   position: absolute;
      //   right: 40px;
      //   bottom: 195px;
      //   display: flex;
      //   flex-wrap: wrap-reverse;
      //   li {
      //     flex: 5;
      //     text-align: center;
      //     margin-left: 30px;

      //     img {
      //       display: inline-block;
      //       width: 87px;
      //       height: 87px;
      //       margin-bottom: 15px;
      //     }
      //   }
      // }
      // .ul_tow {
      //   position: absolute;
      //   right: 40px;
      //   bottom: 45px;
      //   display: flex;
      //   flex-wrap: wrap-reverse;
      //   li {
      //     flex: 5;
      //     text-align: center;
      //     margin-left: 30px;

      //     img {
      //       display: inline-block;
      //       width: 87px;
      //       height: 87px;
      //       margin-bottom: 15px;
      //     }
      //   }
      // }
    }
  }
  //  智能空开
  .dhk {
    //  背景布局
    width: 1920px;
    height: 1080px;
    background-color: rgba(5, 3, 2, 0.2);
    position: absolute;
    top: 0;
    left: 0%;

    //  空开信息盒子
    .bhk_box_tow,
    .bhk_box {
      width: 1341px;
      height: 705px;
      margin-top: 191px;
      margin-left: 379.5px;
      overflow: hidden;
      background: url(../../assets/智能空开.png) no-repeat;
      //  关闭
      .del {
        float: right;
        width: 20px;
        height: 20px;
        margin-top: 22px;
        margin-right: 35px;
        display: block;
        background: url(../../assets/close.svg) no-repeat;
        background-size: 20px 20px;
      }
      // 空开信息
      .box_center_thre,
      .box_centers,
      .box_center {
        display: flex;
        margin: 82px 0 0 34px;
        .vip,
        .cash {
          width: 628.5px;
          height: 177.5px;
          padding-top: 15px;
          margin-right: 22px;
          margin-bottom: 27px;
          color: #00e8ed;
          box-sizing: border-box;
          background: url(../../assets/第三屏-区域底板.png) no-repeat;
          span {
            font-size: 15px;
            font-weight: 500px;
            margin-left: 21px;
            display: inline;
          }
          .el-switch {
            float: right;
            width: 100px;
            height: 24.5px;
          }
          ul {
            display: flex;
            padding-top: 44px;
            li {
              margin-right: 10px;
              p {
                font-size: 25px;
                font-weight: 500;
                margin-top: 5px;
              }
              p:nth-child(2) {
                font-size: 15px;
                width: 110px;
                font-weight: 500;
              }
            }
            li:nth-child(1) {
              margin-left: 20px;
            }
          }
        }
      }
      .box_centers {
        margin-top: 0px;
      }
      .box_center_thre {
        margin-top: 0px;
      }
    }
    .bhk_box_tow {
      margin-top: 591px;
    }
  }
}
</style>



